<template>
  <div class="user-container">
    <!-- 头部 -->
    <div class="header">
      <!-- 未登录 -->
      <div class="no-loign" v-if="!$store.getters.token">
        <img class="mobile-img"
            src="@/assets/mobile.png"
            @click="$router.push('/login')">
        <p>登录&nbsp;/&nbsp;注册</p>
      </div>
      <!-- 已登录 -->
      <div class="has-login" v-else>
        <!-- 用户信息 -->
        <div class="user-info">
          <div class="icon">
            <van-image class="img"
                      round
                      fit="cover"
                      :src="userinfo.photo" />
            <span class="name">{{userinfo.name}}</span>
          </div>
          <router-link to=""
                      class="edit-btn">编辑资料</router-link>
        </div>
        <!-- 用户数据 -->
        <div class="user-data">
          <router-link to="/">
            <p class="num">{{userinfo.art_count}}</p>
            <p class="name">头条</p>
          </router-link>
          <router-link to="/">
            <p class="num">{{userinfo.follow_count}}</p>
            <p class="name">关注</p>
          </router-link>
          <router-link to="/">
            <p class="num">{{userinfo.fans_count}}</p>
            <p class="name">粉丝</p>
          </router-link>
          <router-link to="/">
            <p class="num">{{userinfo.like_count}}</p>
            <p class="name">获赞</p>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 2宫格 -->
    <van-grid class="grid-item" :column-num="2" clickable>
      <van-grid-item   to="/user/shoucang">
        <i class="toutiao toutiao-shoucang" slot="icon"></i>
        <span class="text" slot="text">收藏</span>
      </van-grid-item>
      <van-grid-item to="/user/lishi">
        <i class="toutiao toutiao-lishi" slot="icon"></i>
        <span class="text" slot="text">历史</span>
      </van-grid-item>
    </van-grid>
    <!-- 单元格导航 -->
    <div class="grid-nav">
      <van-cell title="消息通知" is-link to="/message" />
      <van-cell title="小智同学" is-link to="/xztx" />
    </div>
    <!-- 退出按钮 -->
    <van-cell title="退出" @click="quit"  v-if="$store.getters.token" class="quit-btn" />
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  name: 'User',
  data () {
    return {
      userinfo: {}
    }
  },
  created () {
    // 登陆了才可以获取数据
    this.$store.getters.token && this.loadUserInfo()
  },
  methods: {
    // 获取用户信息
    async loadUserInfo () {
      try {
        // 发送请求
        const { data: res } = await getUserInfo()
        // 赋值
        this.userinfo = res.data
      } catch (error) {
        if (error.response.status === 401) {
          this.$toast.fail('登录失效，请重新登录')
          this.$store.commit('setUser', {}) // 清除了原来的登录信息
          this.$router.push('/login?url=/user') // 跳转登录
        } else {
          this.$toast.fail('获取用户资料失败')
          console.dir(error)
        }
      }
    },
    // 退出事件
    async quit () {
      try {
        // 1.提示是否确认退出
        await this.$dialog.confirm({
          title: '提示',
          message: '确认退出吗？'
        })
        // 2.退出操作
        // 清空仓库和本地存储
        this.$store.commit('setUser', {})
      } catch (error) {
        console.log('取消退出')
      }
    }
  }
}
// 用户模块：
// 登录状态
// 【功能1】：获取用户信息数据，展示数据
// 1.1 data定义变量 userinfo
// 1.2 methods里定义获取数据方法 loadUserInfo
//= ==> 1.2.1 在api/user.js里面 定义数据请求方法
//= ==> 1.2.2 在页面中导入该请求方法
//= ==> 1.2.3 在获取数据请求方法里面调用引入的方法，发送请求
//= ==> 1.2.4 错误处理(try-catch捕捉)
//= ==> 1.2.5 成功赋值
// 1.3 created里面调用获取数据方法（登录了）  this.$store.getters.token && this.loadUserInfo()
// 1.4 渲染用户数据信息
// 【功能2】：退出功能
// 1. 退出按钮绑定事件
// 2. 退出事件函数里面，弹出确认框，确认就清除vuex里面state和本地存储

// 登录和未登录状态下都要做：【功能3】导航守卫
// 需求： 未登录点击我的历史或收藏直接跳转到登录界面，然后登录成功，跳转回目标页面
// 思路：
//= =>1.给需要登录后才可以看的界面路由在元信息meta里面加上needLogin字段
//= =>2.书写导航守卫
//= ====> 判断是否需要登录才可以访问（判断是否有needLogin字段）
//= ====> 没有，就说明不需要登录直接可以访问，所以放行
//= ====> 有，就说明需要判断是否登录了(store.getters.token)
//= ========> 已经登录，直接放行
//= ========> 未登录，跳转到登录界面（且告诉他登录成功之后要去的地址）
//= ========> 登录界面改造 登录成功后跳转的地址  this.$router.replace(this.$route.query.url || '/user')
</script>
<style scoped lang="less">
.user-container {
  > .header {
    height: 361px;
    // css中 不能简单直接使用@表示src目录，这样是无法读取，还需要加上一个~
    background: url("~@/assets/banner.png") no-repeat;
    background-size: cover;
    // 没登录
    .no-loign {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .mobile-img {
        width: 132px;
        height: 132px;
      }
      p {
        font-size: 28px;
        color: #fff;
      }
    }
    // 已登录
    .has-login{
      .user-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:76px 32px 0;
        .icon{
          display: flex;
          align-items: center;
          .img{
            width: 132px;
            height:132px;
            background-color: #fff;
            padding: 4px;
          }
          .name{
            margin-left: 24px;
            font-size: 30px;
            color: #fff;
          }
        }
        .edit-btn{
          width: 116px;
          height: 30px;
          display: block;
          border-radius: 15px;
          background-color: #fff;
          font-size: 20px;
          color: #666;
          text-align: center;
          line-height: 30px;
        }
      }
      .user-data{
        display: flex;
        height: 130px;
        margin-top: 10px;
        a{
          flex: 1;
          text-align: center;
          color: #fff;
          .num{
            font-size: 36px;
            margin:33px 0 10px;
          }
          .name{
            font-size: 24px;
             margin:0;
          }
        }
      }

    }

  }
  /deep/ .quit-btn{
     margin-top: 10px;
    .van-cell__title{
      text-align: center;
      line-height: 70px;
      span{
        color: #d86262;
        font-size: 30px;
      }
    }
  }
  .grid-item {
    margin-bottom: 10px;
    .toutiao {
      font-size: 48px;
    }
    .text {
      font-size: 28px;
      margin-top: 10px;
    }
    .toutiao-shoucang {
      color: #eb5253;
    }
    .toutiao-lishi {
      color: #ff9d1d;
    }
  }
}
</style>
